<template>
  <div class="box">
    <div>Child3子组件</div>
    <div>普通方法</div>
    <div>普通获取数据: {{ $store.state.Child3.obj.name }}</div>
    <div>辅助函数</div>
    <div>辅助函数获取: {{ obj.name }}</div>

    <hr />

    <div>修改state中的数据</div>
    <div>普通修改</div>
    <button @click="$store.dispatch('Child3/getObj', 'Jack')">异步修改state中的数据</button>
    <div>辅助函数修改</div>
    <button @click="asyncGetObj">辅助函数修改state中的数据</button>

    <hr />

    <div>同步修改</div>
    <div>普通修改</div>
    <button @click="$store.commit('Child3/GET_OBJ', 'Jack1')">同步修改state中的数据</button>
    <div>辅助函数修改</div>
    <button @click="GetObj">辅助函数同步修改state中的数据</button>

    <hr />

    <div>命名空间模块getters的使用</div>

    <div>普通使用</div>
    <!-- 开启命名空间之后,取出对应模块下的getters数据需要使用中括号取值 -->
    <div>普通获取数据: {{ $store.getters['Child3/newObj'] }}</div>
    <div>辅助函数使用</div>
    <div>辅助函数获取: {{ newObj }}</div>
  </div>
</template>

<script>
import { mapState, mapActions, mapMutations, mapGetters } from 'vuex'
export default {
  name: 'VChild3',
  computed: {
    // 模块开启命名空间之后,在取值和调用方法的时候,都需要加上对应的模块名
    ...mapState('Child3', ['obj']),
    ...mapGetters('Child3', ['newObj'])
  },
  methods: {
    ...mapActions('Child3', ['getObj']),
    ...mapMutations('Child3', ['GET_OBJ']),
    asyncGetObj() {
      this.getObj('葫芦')
    },
    GetObj() {
      this.GET_OBJ('葫芦1')
    }
  }
}
</script>

<style scoped></style>
